<template>
	<view class="explore">
		<status-bar></status-bar>

		<view class="top">
			<view class="nav">
				<uni-icons type="left" size="25" color="#c0c0c0" @click="cancel"></uni-icons>
				<uni-search-bar @confirm="search" bgColor="#ffffff" class="search" :focus="true" @cancel="cancel()"
					cancelText="取消"></uni-search-bar>
			</view>
		</view>

		<u-loading-icon :show="pageState===-2" style="margin-top: 100px;"></u-loading-icon>

		<u-empty v-if="pageState===-1" mode="wifi"></u-empty>

		<u-empty v-if="pageState===0 && (!result || result.length==0)" mode="search"></u-empty>



		<view class="tab" v-if="result && result.length>0">
			<tab-bar :title-list="tabsList" @change="changeTab">
				<tab-bar-item slot="0" :refresherEnabled="false">
					<view class="tab-page">
						<block v-for="(item,index) in result[0].list">
							<view class="card">
								<!-- <book-card v-bind="item" :tags="[item.state,item.classify,item.id]" :is-link="true"
									:is-rich="true" :link="'/pages/contents/contents?id=' + item.id" type="nav-card"
									:key="index" @read="read">
								</book-card> -->

								<!-- #ifdef APP-PLUS || H5-->
								<book-card v-bind="item" :tags="[item.state,item.classify,item.id]" :is-link="true"
									:card-id="item.id" :is-rich="true" :link="'/pages/contents/contents?id=' + item.id"
									type="nav-card" :key="index" @read="read">
								</book-card>
								<!-- #endif -->

								<!-- #ifdef MP -->
								<book-card :tags="[item.state,item.classify,item.id]" :name="item.name"
									:author="item.author" :card-id="item.id" :img="item.img"
									:sourceSite="item.sourceSite" :synopsis="item.synopsis" :is-link="true"
									:is-rich="true" :link="'/pages/contents/contents?id=' + item.id" type="nav-card"
									:key="index" @read="read">
								</book-card>
								<!-- #endif -->

							</view>
						</block>
					</view>

				</tab-bar-item>

				<tab-bar-item slot="1" :refresherEnabled="false">
					<view class="tab-page">
						<block v-for="(item,index) in result[1].list">
							<view class="card">
								<book-card :name="item.name" :author="item.author" :img="item.img" @read="read"
									:source-site="item.sourceSite" :tags="[item.state,item.classify,item.id]"
									:synopsis="item.synopsis" :is-link="true" :is-rich="true"
									:link="'/pages/contents/contents?id=' + item.id" type="list" :key="index">
								</book-card>
							</view>
						</block>
					</view>
				</tab-bar-item>

				<tab-bar-item slot="2" :refresherEnabled="false">
					<view class="tab-page">
						<block v-for="(item,index) in result[2].list">
							<view class="card">
								<book-card :name="item.name" :author="item.author" :img="item.img" @read="read"
									:source-site="item.sourceSite" :tags="[item.state,item.classify,item.id]"
									:synopsis="item.synopsis" :is-link="true" :is-rich="true"
									:link="'/pages/contents/contents?id=' + item.id" type="list" :key="index">
								</book-card>
							</view>
						</block>
					</view>

				</tab-bar-item>


				<tab-bar-item slot="3" :refresherEnabled="false">
					<view class="tab-page">
						<block v-for="(item,index) in result[3].list">
							<view class="card">
								<book-card :name="item.name" :author="item.author" :img="item.img" @read="read"
									:source-site="item.sourceSite" :tags="[item.state,item.classify,item.id]"
									:synopsis="item.synopsis" :is-link="true" :is-rich="true"
									:link="'/pages/contents/contents?id=' + item.id" type="nav-card" :key="index">
								</book-card>
							</view>
						</block>
					</view>
				</tab-bar-item>
			</tab-bar>
		</view>

	</view>
</template>

<script>
	import utils from '@/static/js/utils.js'
	export default {
		data() {
			return {
				tabsList: ["全部", "书名", "作者", "简介"],
				result: [],
				current: 0,
				pageState: -3,
			}
		},
		methods: {
			read(id) {
				uni.navigateTo({
					url: '/pages/contents/contents?id=' + id
				})
			},
			changeTab(current) {
				this.current = current
			},
			cancel() {
				uni.navigateBack()
			},
			search(e) {

				this.pageState = -2
				this.result = []

				utils.http.post(`/search?key=${e.value}&n=10`).then(res => {
					this.pageState = 0

					if (res.status == 200) {
						let result = [{
							title: "全部",
							list: [],
							field: 'all'
						}, {
							title: "书名",
							list: [],
							field: 'name'
						}, {
							title: "作者",
							list: [],
							field: 'author'
						}, {
							title: "简介",
							list: [],
							field: 'synopsis',
						}]

						res.data.forEach(book => {

							for (let i = 1; i < result.length; i++) {

								if (book[result[i].field].search('span') != -1) {

									result[i].list.push(book);
								}

							}

							result[0].list.push(book)
						})
						this.result = result
					}
				}).catch(e => {
					this.pageState = -1
				})
			}
		}
	}
</script>

<style scoped>
	.explore {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.tab-page {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tab {
		flex: 1;
		width: 100%;
	}

	tab-bar {
		height: 100%;
		width: 100%;
	}



	.card {
		margin: 10px 0px;
		padding: 15px 10px;
		background-color: white;
		border-radius: 10px;
		width: 90%;
	}


	.top {
		width: 100%;
		position: sticky;
		background-color: white;
		display: flex;
		flex-direction: row;
		justify-content: center;
		height: 44px;
	}

	.nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 95%;
		height: 44px;
		justify-content: center;
	}

	.search {
		width: 90%;
	}
</style>
